// 外边框
@for $i from 1 through 20 {
  .mt-#{$i} {
    margin-top: #{$i}px;
  }

  .mr-#{$i} {
    margin-right: #{$i}px;
  }

  .mb-#{$i} {
    margin-bottom: #{$i}px;
  }

  .ml-#{$i} {
    margin-left: #{$i}px;
  }
}

// 内边框
@for $i from 1 through 20 {
  .pt-#{$i} {
    padding-top: #{$i}px;
  }

  .pr-#{$i} {
    padding-right: #{$i}px;
  }

  .pb-#{$i} {
    padding-bottom: #{$i}px;
  }

  .pl-#{$i} {
    padding-left: #{$i}px;
  }
}

// todo: flex 布局
$wraps: nowrap, wrap, wrap-reverse;
$directions: row, row-reverse, column, column-reverse;
$alignItems: flex-start, flex-end, center, baseline, stretch;
$alignSelfs: auto, flex-start, flex-end, center, baseline, stretch;
$justifyContents: flex-start, flex-end, center, space-between, space-around;
$alignContents: flex-start, flex-end, center, space-between, space-around,
  stretch;

.flex {
  // todo: 容器属性
  display: flex;
  display: -webkit-flex;
  /* Safari */

  // flex-direction
  &_d {
    @each $var in $directions {
      &-#{$var} {
        flex-direction: #{$var};
      }
    }
  }

  // flex-wrap
  &_w {
    @each $var in $wraps {
      &-#{$var} {
        flex-wrap: #{$var};
      }
    }
  }

  // justify-content
  &_j_c {
    @each $var in $justifyContents {
      &-#{$var} {
        justify-content: #{$var};
      }
    }
  }

  // align-items
  &_a_i {
    @each $var in $alignItems {
      &-#{$var} {
        align-items: #{$var};
      }
    }
  }

  // align-content
  &_a_c {
    @each $var in $alignContents {
      &-#{$var} {
        align-content: #{$var};
      }
    }
  }

  // todo: 子元素属性
  &-item {
    // flex: flex-grow flex-shrink flex-basis
    &_f-a {
      flex: auto;
    }

    &_f-n {
      flex: none;
    }
  }
}
